<!--  -->
<template>
  <div class="lesson_detail">
    <top-tit :tit="'课程详情'"></top-tit>
    <div class="big_img">
      <img :src="bigImgSrc" alt="" />
    </div>

    <div class="detail-tit">
      <div v-text="title"></div>
    </div>

    <div class="chargeInfo">
      <div class="container">
        <div class="charge" v-if="price == 0">
          <span style="color: #04c877; font-size: 18px">免费</span>
        </div>
        <div class="charge" v-else><span>￥</span>{{ price }}</div>
        <div class="star" v-text="star_num + '人已订阅'"></div>
      </div>
    </div>

    <hr style="height: 10px; background: #f6f6f6; border: none" />

    <div class="tab">
      <div class="container">
        <div class="tabs">
          <div class="item-tab" :class="{ active: flagIndex == 0 }" @click="changeIndex(0)">
            介绍
          </div>
          <div class="item-tab" :class="{ active: flagIndex == 1 }" @click="changeIndex(1)">
            目录
          </div>
          <div class="item-tab" :class="{ active: flagIndex == 2 }" @click="changeIndex(2)">
            评论
          </div>
        </div>
      </div>
    </div>

    <div class="tab_con">
      <div class="container">
        <div class="jieshao" v-show="flagIndex == 0">
          <img :src="bigInfoImg" alt="" />
        </div>

        <div class="mulu" v-show="flagIndex == 1">
          <div class="caputer_item" v-for="item in caputer" :key="item.id">
            <div class="caputer_tit">
              <div class="tit_name" v-text="item.title"></div>
              <img
                class="show_icon"
                :src="videos[item.id]['flag'] ? showIcon2 : showIcon"
                @click="testLog(item.id)"
              />
            </div>

            <div class="caputer_con" v-show="!videos[item.id]['flag']">
              <div v-for="item2 in videos[item.id]" :key="item2.title">
                <div class="title" v-text="item2.title"></div>
                <div
                  class="duration"
                  v-text="
                    (item2.duration / 60 < 10 ? '0' + item2.duration / 60 : item2.duration / 60) +
                    ':' +
                    (item2.duration % 60 < 10 ? '0' + (item2.duration % 60) : item2.duration % 60)
                  "
                ></div>
              </div>
            </div>
          </div>
        </div>

        <div class="pinlun" v-show="flagIndex == 2">
          <div class="comment_item" v-for="item in comment.comments" :key="item.id">
            <div class="head_icon">
              <img :src="comment.users[item.user_id].avatar" alt="" />
            </div>

            <div class="con">
              <div class="username">
                <div class="name" v-text="comment.users[item.user_id].nick_name"></div>
                <!-- <div class="time" v-text="this.$myCreateTime(this.comment.comments[0].created_at)"></div> -->
                <!-- <div class="time" v-bind:data-time="comment.users[item.user_id].created_at | timeago" :key="item.user_id">{{ comment.users[item.user_id].created_at | timeago }}</div> -->
                <div class="time">{{ item.created_at | timeago }}</div>
              </div>
              <div class="text" v-text="item.render_content"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="foot">
      <div class="container">
        <div class="star" v-show="flagIndex == 0 || flagIndex == 1">
          <div class="star_btn">
            <div class="star_icon" @click="sendCollect">
              <img
                :src="
                  isCollect
                    ? require('@/assets/img/star-icon2.png')
                    : require('@/assets/img/star-icon.png')
                "
                alt=""
              />
              <div>收藏</div>
            </div>
          </div>
          <div class="look_btn" v-if="isBuy">
            <div class="to_study">开始学习</div>
          </div>
          <div class="look_btn" v-else>
            <div class="free">VIP会员免费看</div>
            <div class="buy">订阅课程</div>
          </div>
        </div>

        <div class="setpinlun" v-show="flagIndex == 2">
          <input type="text" placeholder="请输入评论内容" v-model="commentCon" />

          <div class="comment_btn" @click="sendComment">发布</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import topTit from "@/components/topTit";
import { Tab, Tabs, Toast } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
export default {
  name: "Detail",
  components: {
    topTit,
  },
  data() {
    return {
      flagIndex: 1,
      id: location.href.split("=")[1],
      bigImgSrc: "",
      bigInfoImg: "",
      title: "",
      price: "",
      star_num: "",
      caputer: [],
      showIcon: require("@/assets/img/down.png"),
      showIcon2: require("@/assets/img/next.png"),
      videos: [],
      showFlag: [],
      page: 1,
      page_size: 10,
      comment: [],
      commentCon: "",
      token: localStorage.getItem("h5-token"),
      isCollect: null,
      isBuy: null,
    };
  },
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    sendCollect() {
      if (!this.token) {
        Toast.fail("请先登录");
        return "";
      }
      this.$axios
        .get(`http://1.14.239.98/api/v2/course/${this.id}/like`, {
          params: {
            code: this.isCollect,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.isCollect = !this.isCollect;
            Toast.success("收藏成功");
          } else {
            Toast.fail("收藏失败");
          }
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    changeIndex(index) {
      this.flagIndex = index;
      if (index === 2) {
        // console.log(this.page);
        // console.log(this.page_size);
        this.$axios
          .get(`http://1.14.239.98/api/v2/course/${this.id}/comments`, {
            params: {
              // query: {
              page: this.page,
              page_size: this.page_size,
              // },
            },
          })
          .then((res) => {
            this.comment = res.data;
            // console.log(this.comment);
          });
      }
    },
    testLog(id) {
      if (this.videos[id]["flag"]) {
        Vue.set(this.videos[id], "flag", false);
        // this.videos[id]['flag']=false
      } else {
        Vue.set(this.videos[id], "flag", true);
      }
      // this.deep = !this.deep;
      // console.log("deep", this.deep);
      // console.log(this.videos);
    },
    sendComment() {
      // console.log(this.commentCon);
      if (this.commentCon.length < 6) {
        Toast.fail("评论长度小于6");
        return;
      }
      if (!this.token) {
        Toast.fail("请先登录");
        return;
      }
      this.$axios.post(`http://1.14.239.98/api/v2/course/${this.id}/comment`, {
        content: this.commentCon,
      });
      this.commentCon = "";
      // Toast.success("三秒后刷新");
      setTimeout(() => {
        this.changeIndex(2);
        // Toast("刷新！！！");
      }, 3000);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 1. 通过请求获取首页数据
    // console.log(this.id);
    await this.$axios
      .get("http://1.14.239.98/api/v2/course/" + this.id, {
        params: {
          platform: "h5",
          page_name: "h5-page-index",
        },
      })
      .then((res) => {
        // console.log(res.data);
        // console.log(JSON.parse(JSON.stringify(res.data)));
        let src = res.data.course.render_desc;
        this.bigInfoImg = src.slice(src.indexOf('"') + 1, src.lastIndexOf('"') + "");
        this.bigImgSrc = res.data.course.thumb;
        this.title = res.data.course.title;
        this.star_num = res.data.course.user_count;
        this.price = res.data.course.charge;
        this.caputer = res.data.chapters;
        this.videos = res.data.videos;
        // console.log(this.videos);
        // console.log(this.caputer);
        this.isCollect = res.data.isCollect;
        this.isBuy = res.data.isBuy;
        // console.log(this.isCollect);
      });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
div.lesson_detail {
  width: 100%;
  padding-bottom: 1.06rem;
  position: relative;
  height: 100%;
  div.big_img {
    height: 5.705rem;
    img {
      width: 100%;
    }
  }

  div.detail-tit {
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: start;
    align-items: flex-end;
    div {
      // display: inline-block;
      height: 100%;
      line-height: calc(0.6rem + 0.3rem);
      // line-height: 1.3rem;
      margin-left: 0.3rem;
      font-size: 0.3rem;
      color: #333;
    }
  }

  div.chargeInfo {
    width: 100%;
    height: 1.2rem;
    div.container {
      width: 6.9rem;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      div.charge {
        font-size: 0.4rem;
        color: #ff4d4f;
        span {
          font-size: 0.28rem;
        }
      }
      div.star {
        color: #999;
        font-size: 0.28rem;
      }
    }
  }

  div.tab {
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 80% / 20%);
    height: 1.1rem;
    div.container {
      width: 4.3rem;
      height: 100%;
      div.tabs {
        width: 4.3rem;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        div.item-tab {
          font-size: 0.3rem;
          font-weight: 400;
          color: #333;
          position: relative;
        }
        div.item-tab.active {
          font-weight: 600;
          color: #3ca7fa;

          &::after {
            position: absolute;
            display: block;
            content: "";
            width: 0.4rem;
            height: 0.06rem;
            left: 0.1rem;
            top: 150%;
            background-color: #3ca7fa;
          }
        }
      }
    }
  }

  div.tab_con {
    padding: 0.4rem 0.3rem 0.3rem 0.3rem;
    div.container {
      width: 6.9rem;
      div.jieshao {
        width: 6.9rem;
        img {
          width: 6.9rem;
        }
      }

      div.mulu {
        width: 6.9rem;
        div.caputer_item {
          // height: 2.86rem;
          div.caputer_tit {
            height: 0.42rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 0.2rem 0 0.4rem 0;
            div.tit_name {
              font-size: 15px;
              color: #333;
              font-weight: 700;
            }

            img.show_icon {
              width: 0.3rem;
              height: 0.3rem;
            }
          }

          div.caputer_con {
            div {
              padding: 0 0.2rem;
              margin-bottom: 0.2rem;
              background: #f6f6f6;
              border-radius: 4px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              div.title {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                font-size: 14px;
                color: #333;
              }
            }

            div.duration {
            }
          }
        }
      }

      div.pinlun {
        width: 6.9rem;
        div.comment_item {
          width: 6.9rem;
          height: 1.116rem;
          margin-bottom: 25px;
          display: flex;
          justify-content: space-between;
          div.head_icon {
            width: 0.64rem;
            height: 0.64rem;
            margin-right: 0.1rem;
            img {
              width: 0.64rem;
              height: 0.64rem;
            }
          }

          div.con {
            width: 6.1rem;
            height: 1.116rem;
            div.username {
              color: #999;
              font-size: 0.24rem;
              height: 0.42rem;
              margin-top: 0.1rem;
              margin-bottom: 0.26rem;
              display: flex;
              justify-content: space-between;
              div.name {
              }

              div.time {
              }
            }

            div.text {
              color: #333;
              font-size: 0.28rem;
              overflow: hidden;
              text-align: start;
            }
          }
        }
      }
    }
  }

  div.foot {
    position: sticky;
    bottom: 0;
    width: 7.5rem;
    height: 1.06rem;
    background-color: white;
    left: calc(50% - 7.5rem / 2);
    .container {
      width: 6.9rem;
      height: 1.06rem;
      div.star {
        width: 6.9rem;
        height: 1.06rem;
        display: flex;
        align-items: center;
        div.star_btn {
          height: 1.04rem;
          width: 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-right: 0.5rem;
          div.star_icon {
            img {
              width: 0.48rem;
              height: 0.48rem;
            }
            div {
              font-size: 0.24rem;
              color: #666;
              width: 0.5rem;
            }
          }
        }

        .look_btn {
          display: flex;
          width: 305px;
          div.free {
            border-radius: 3px 0 0 3px;
            background-color: #e2a500;
            color: #fff;
            width: 3.05rem;
            height: 0.88rem;
            line-height: 0.88rem;
            font-size: 15px;
            font-weight: 500;
          }

          div.buy {
            border-radius: 0 4px 4px 0;
            background-color: #ff5068;
            color: #fff;
            width: 3.05rem;
            height: 0.88rem;
            line-height: 0.88rem;
            font-size: 15px;
            font-weight: 500;
          }
          div.to_study {
            flex-basis: 100%;
            background-color: #3ca7fa;
            border-radius: .08rem;
            height: 0.88rem;
            line-height: 0.88rem;
            font-size: 15px;
            font-weight: 500;
            color: white;
          }
        }
      }

      div.setpinlun {
        width: 6.9rem;
        height: 1.06rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        input {
          width: 6rem;
          height: 0.44rem;
          border: none;
          outline: none;
          font-size: 0.28rem;
        }

        div.comment_btn {
          width: 0.86rem;
          height: 0.86rem;
          line-height: 0.86rem;
          font-size: 14px;
          font-weight: 400;
          color: #666;
        }
      }
    }
  }
}
</style>
